<template>
  <div class="app-container">

    <!-- 左侧栏 -->
    <div class="left" v-if="leftVisible">
      <el-form class="form" label-width="100px">

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="试卷名称：" prop="name">
              <el-input v-model="form.examPageName"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="item">
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-form-item class="paper_name" label="单选题数量:" prop="name" >
              <el-input v-model="RandomForm.choiceNum" class="paper_name_input"/>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16">
            <el-form-item label="单题分数：" prop="analyze" class="analyze">
              <el-input-number v-model="RandomForm.choiceScore" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="item">
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-form-item class="paper_name" label="多选题数量:" prop="name" >
              <el-input v-model="RandomForm.multipleChoiceNum" class="paper_name_input"/>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16">
            <el-form-item label="单题分数：" prop="analyze" class="analyze">
              <el-input-number v-model="RandomForm.multipleChoiceScore" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="item">
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-form-item class="paper_name" label="判断题数量:" prop="name" >
              <el-input v-model="RandomForm.judgeNum" class="paper_name_input"/>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16">
            <el-form-item label="单题分数：" prop="analyze" class="analyze">
              <el-input-number v-model="RandomForm.judgeScore" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="item">
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-form-item class="paper_name" label="填空题数量:" prop="name" >
              <el-input v-model="RandomForm.packNum" class="paper_name_input"/>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16">
            <el-form-item label="单题分数：" prop="analyze" class="analyze">
              <el-input-number v-model="RandomForm.packScore" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="item">
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-form-item class="paper_name" label="简答题数量:" prop="name">
              <el-input v-model="RandomForm.bigQuestionNum" class="paper_name_input"/>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16">
            <el-form-item label="单题分数：" prop="analyze" class="analyze">
              <el-input-number v-model="RandomForm.bigQuestionScore" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="时间限制：" class="time_limit">
              <el-date-picker v-model="limitTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                              class="paper_date"
                              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="建议时长：" prop="suggestTime" class="time_suggest">
              <el-input v-model="form.adviceTime" class="paper_suggest" placeholder="分钟"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="paper_button" :gutter="150" style="margin-left: 15%">
          <el-col :span="4">
            <el-button type="primary" @click="handleSubmit">生成试卷</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>

        </el-row>


      </el-form>

    </div>

    <!-- 右侧动态生成试卷 -->
    <div class="right" v-if="rightVisible">

      <div class="right_container" >
        <div class="right_container_header" >
          <div class="right_container_header_div1" >{{form.examPageName}}</div>
          <div class="right_container_header_div2" >{{"时长:" + form.adviceTime + "分钟"}}</div>
          <div class="right_container_header_div3">{{"总分:" + getTotal()}}</div>
        </div>
        <div class="right_container_body">
          <!-- 选择题渲染 -->
          <div class="right_container_body_choice" v-if="form.choice.length !== 0">
            <div class="right_container_body_choice_div1" >单选题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.choice" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteChoice(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>
                <!--                答案选项 LPH-->
                <div  style="margin-top: 10px;margin-left: 2%;padding-bottom: 1%;width: 90%;display: flex;">
                  <div v-for="(it,ide) in item.items" :key="ide" style="width: 25%;display: flex;height: 30px;">
                    <span class="fontHeight">{{it.prefix+"."}}</span>
                    <span v-html="it.content" class="titleContent"></span>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex;">
                  <div style=" height: auto;line-height: 20px;width: 80%;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"分数:" + item.score}}</div>
                <div style="margin-top: 1%;height: 20px;line-height: 20px">{{"答案:" + item.correctArray}}</div>
              </div>
            </div>
          </div>

          <!-- 多选题渲染 -->
          <div class="right_container_body_multChoices" v-if="form.multChoices.length !== 0">
            <div style="margin-left: 5%;font-size: 20px" >多选题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.multChoices" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteMutiChoices(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>
                <!--                答案选项 LPH-->
                <div  style="margin-top: 20px;margin-left: 2%;padding-bottom: 1%;width: 100%;display: flex;">
                  <div v-for="(it,ide) in item.items" :key="ide" style="width: 25%;display: flex;height: 30px;">
                    <span class="fontHeight">{{it.prefix+"."}}</span>
                    <span v-html="it.content" class="titleContent"></span>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"分数:" + item.score}}</div>
                <div style="margin-top: 1%;height: 20px;line-height: 20px">{{"答案:" + item.correctArray}}</div>
              </div>
            </div>
          </div>


          <!-- 判断题渲染 -->
          <div class="right_container_body_judge" v-if="form.judge.length !== 0">
            <div style="margin-left: 5%;font-size: 20px" >判断题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.judge" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteJudge(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>
                <!--                答案选项 LPH-->
                <div  style="margin-top: 20px;margin-left: 2%;padding-bottom: 1%;width: 100%;display: flex;">
                  <div v-for="(it,ide) in item.items" :key="ide" style="width: 25%;display: flex;height: 30px;">
                    <span class="fontHeight">{{it.prefix+"."}}</span>
                    <span v-html="it.content" class="titleContent"></span>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"分数:" + item.score}}</div>
                <div style="margin-top: 1%;height: 20px;line-height: 20px">{{"答案:" + item.correctArray}}</div>
              </div>
            </div>
          </div>

          <!-- 填空题渲染 -->
          <div class="right_container_body_pack" v-if="form.pack.length !== 0">
            <div style="margin-left: 5%;font-size: 20px" >填空题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.pack" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deletePack(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 4px;line-height: 20px;">{{"分数:" + item.score}}</div>

                <div style="margin-top: 4px;line-height: 20px;display: flex">
                  答案: <span v-html="item.correctArray"></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 简答题渲染 -->
          <div class="right_container_body_bigQuestion" v-if="form.bigQuestions.length !== 0">
            <div style="margin-left: 5%;font-size: 20px" >简答题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.bigQuestions" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteBigQuestion(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>


                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 4px;line-height: 20px;">{{"分数:" + item.score}}</div>

                <div style="margin-top: 4px;line-height: 20px;display: flex">
                  答案: <span v-html="item.correctArray"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right_foot">
        <el-button v-show="judge()"  type="primary" @click="submitPaper">生成</el-button>
        <el-button type="warning" @click="back" style="margin-left: 10%">返回</el-button>
      </div>
    </div>

    <!-- 修改分数弹出框 -->
    <el-dialog title="修改单选题分数" :visible.sync="updateScoreVisible" width="30%">
      <el-form label-width="100px">
        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：">
              <el-input v-model="num"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="buttons" >
          <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-button type="primary" @click="submitUpdateScore">提交</el-button>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-button @click="cancel">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import question from '../../../utils/question';
  import { addExamPage, randomExampage } from '../../../api';

  export default {
    name: 'RandomPaper',
    data() {
      return {
        /* 计数器 */
        num: 0,
        updateScoreVisible: false,

        /* 中间标识 */
        index: 0,

        limitTime: '',

        RandomForm: {
          choiceNum: 0,
          multipleChoiceNum: 0,
          judgeNum: 0,
          packNum: 0,
          bigQuestionNum: 0,
          choiceScore: 0,
          multipleChoiceScore: 0,
          judgeScore: 0,
          packScore: 0,
          bigQuestionScore: 0
        },
        form: {
          examPageId: null,
          examPageName: null,
          createTime: null,
          startTime: 0,
          endTime: 0,
          adviceTime: 0,
          choice: [],
          multChoices: [],
          judge: [],
          pack: [],
          bigQuestions: [],
          score: 0
        },
        leftVisible: true,
        rightVisible: false

      };
    },
    created() {

    },
    mounted() {

    },
    methods: {
      /* 试卷展示 */
      async handlePreview() {
        console.log(this.RandomForm);
        /* 发送请求,获取数据 */

        let choiceNum = this.RandomForm.choiceNum;
        let multipleChoiceNum = this.RandomForm.multipleChoiceNum;
        let judgeNum = this.RandomForm.judgeNum;
        let packNum = this.RandomForm.packNum;
        let bigQuestionNum = this.RandomForm.bigQuestionNum;
        let choiceScore = this.RandomForm.choiceScore;
        let multipleChoiceScore = this.RandomForm.multipleChoiceScore;
        let judgeScore = this.RandomForm.judgeScore;
        let packScore = this.RandomForm.packScore;
        let bigQuestionScore = this.RandomForm.bigQuestionScore;

        const data =  await randomExampage({
          choiceNum,
          multipleChoiceNum,
          judgeNum,
          packNum,
          bigQuestionNum,
          choiceScore,
          multipleChoiceScore,
          judgeScore,
          packScore,
          bigQuestionScore
        });

        this.form.choice = data.examPage.choice;
        this.form.multChoices = data.examPage.multChoices;
        this.form.judge = data.examPage.judge;
        this.form.pack = data.examPage.pack;
        this.form.bigQuestions = data.examPage.bigQuestions;

        /* 获取试卷随机题目,渲染数据 */
      },
      /* 生产试卷 */
      async handleSubmit() {

        if ((this.form.examPageName === 'null') || (this.form.examPageName === null)
                || (this.limitTime[0] === undefined) || (this.limitTime[0] === null)
                || (this.limitTime[1] === undefined) || (this.limitTime[1] === null)) {
          this.$message.error("请将关键信息补充完整!");
        }else{


          this.handlePreview();
          this.leftVisible = false;
          this.rightVisible = true;
          console.log(this.leftVisible);
          console.log(this.rightVisible);


        }

      },
      /* 重置 */
      reset(){
        this.num = 0;
        this.limitTime = '';
        let newRandomForm =  {
            choiceNum: 0,
            multipleChoiceNum: 0,
            judgeNum: 0,
            packNum: 0,
            bigQuestionNum: 0,
            choiceScore: 0,
            multipleChoiceScore: 0,
            judgeScore: 0,
            packScore: 0,
            bigQuestionScore: 0
        };
        let newForm = {
          examPageId: null,
            examPageName: null,
            createTime: null,
            startTime: 0,
            endTime: 0,
            adviceTime: 0,
            choice: [],
            multChoices: [],
            judge: [],
            pack: [],
            bigQuestions: [],
            score: 0
        };
        this.RandomForm = newRandomForm;
        this.form = newForm;
      },
      judge(){
        if (this.form.choice.length >0 || this.form.multChoices.length >0 || this.form.judge.length >0 || this.form.pack.length >0 || this.form.bigQuestions.length >0){
          return true;
        }else {
          return false;
        }
      },
      back(){
        this.rightVisible = false;
        this.leftVisible = true;
      },
      async submitPaper() {

        let st = this.limitTime[0];
        let et = this.limitTime[1];
        let s = new Date(st.replace(new RegExp("-", "gm"), "/")).getTime();
        let p = new Date(et.replace(new RegExp("-", "gm"), "/")).getTime();

        this.form.startTime = s + '';
        this.form.endTime = p + '';
        console.log(typeof this.form.startTime);
        console.log(this.form);

        let exampageId = '';
        let exampageName = this.form.examPageName;
        let createTime = '';
        let startTime = this.form.startTime;
        let endTime = this.form.endTime;
        let adviceTime = this.form.adviceTime;
        let choice = this.form.choice;
        let multChoices = this.form.multChoices;
        let judge = this.form.judge;
        let pack = this.form.pack;
        let bigQuestions = this.form.bigQuestions;


        await addExamPage({
          exampageId,
          exampageName,
          createTime,
          startTime,
          endTime,
          adviceTime,
          choice,
          multChoices,
          judge,
          pack,
          bigQuestions
        });

        this.back();
        this.$message.success("添加成功!");
        this.reset();
        await this.$router.push({ path: '/ExamList' });
      },
      /* 删除单选题题目 */
      deleteChoice(id){

        // 遍历choice,删除
        let newChoice = [];
        let j = 0;
        for (let i = 0; i < this.form.choice.length; i++) {
          if (!(id === i)) {
            newChoice[j] = this.form.choice[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.choice = newChoice;
      },

      /* 删除多选题 */
      deleteMutiChoices(id) {
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for (let i = 0; i < this.form.multChoices.length; i++) {
          if (!(id === i)) {
            newChoice[j] = this.form.multChoices[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.multChoices = newChoice;
      },

      /* 删除判断题 */
      deleteJudge(id) {
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for (let i = 0; i < this.form.judge.length; i++) {
          if (!(id === i)) {
            newChoice[j] = this.form.judge[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.judge = newChoice;
      },

      /* 删除填空题 */
      deletePack(id) {
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for (let i = 0; i < this.form.pack.length; i++) {
          if (!(id === i)) {
            newChoice[j] = this.form.pack[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.pack = newChoice;
      },

      /* 删除简答题 */
      deleteBigQuestion(id) {
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for (let i = 0; i < this.form.bigQuestions.length; i++) {
          if (!(id === i)) {
            newChoice[j] = this.form.bigQuestions[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.bigQuestions = newChoice;
      },

      handleChoiceSet(item){
        this.updateScoreVisible = true;
        console.log(item.id);
        this.index = item.id;
      },

      /* 提交修改分数 */
      submitUpdateScore(){
        let index = this.index;
        console.log(index);
        for(let i = 0;i < this.form.choice.length;i++){
          if(this.form.choice[i].id === index){
            this.form.choice[i].score = this.num;
            break;
          }
        }

        for(let i = 0;i < this.form.multChoices.length;i++){
          if(this.form.multChoices[i].id === index){
            this.form.multChoices[i].score = this.num;
            break;
          }
        }

        for(let i = 0;i < this.form.judge.length;i++){
          if(this.form.judge[i].id === index){
            this.form.judge[i].score = this.num;
            break;
          }
        }

        for(let i = 0;i < this.form.pack.length;i++){
          if(this.form.pack[i].id === index){
            this.form.pack[i].score = this.num;
            break;
          }
        }

        for(let i = 0;i < this.form.bigQuestions.length;i++){
          if(this.form.bigQuestions[i].id === index){
            this.form.bigQuestions[i].score = this.num;
            break;
          }
        }

        this.$message.success("修改分数成功!");
        this.updateScoreVisible = false;
      },

      cancel(){
        this.updateScoreVisible = false;
      },

      /* 计算总分 */
      getTotal(){
        let sum = 0;
        for(let i = 0;i < this.form.choice.length;i++){
          sum += parseInt(this.form.choice[i].score);
        }
        for(let i = 0;i < this.form.multChoices.length;i++){
          sum += parseInt(this.form.multChoices[i].score);
        }
        for(let i = 0;i < this.form.judge.length;i++){
          sum += parseInt(this.form.judge[i].score);
        }
        for(let i = 0;i < this.form.pack.length;i++){
          sum += parseInt(this.form.pack[i].score);
        }
        for(let i = 0;i < this.form.bigQuestions.length;i++){
          sum += parseInt(this.form.bigQuestions[i].score);
        }

        return sum;
      }

    },
    watch:{
      updateScoreVisible(){
        if(this.updateScoreVisible === false){
          this.num = 0;
        }
      },
/*      leftVisible(){
        if (this.leftVisible === false){
          this.rightVisible = true;
        }
      },
      rightVisible(){
        if (this.rightVisible === false){
          this.leftVisible = true;
        }
      },*/
    }
  };
</script>

<style>
  .app-container {
    display: flex;
  }

  .left {
    float: left;
    width: 80%;
    display: inline-block;
    padding: 25px 20px 0px 50px;
    margin-left: 10%;
  }


  .form {
    width: 100%;
    margin-left: 2%;
  }

  .item {
    margin-top: 2%;
    margin-left: 10%;
    margin-bottom: 2%;
  }

  .analyze{
    margin-left: 7%;
  }

  .time_limit {
    margin-top: 2%;
  }

  .time_suggest {
    margin-top: 1%;
    width: 70%;
  }

  .paper_button {
    margin-top: 2%;
  }

  .paper_date {
    width: 70%;
  }

  .paper_suggest {
    width: 70%;
  }


  .right {
    float: right;
    width: 100%;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
  }


  .right_container_header {
    margin: 5% auto;
    width: 100%;
    text-align: center;
  }

  .right_container_header_div1 {
    font-size: 20px;
  }

  .right_container_header_div2 {
    margin-top: 2%;
  }

  .right_container_header_div3 {
    margin-top: 1%;
  }

  .right_container_body_choice_div1 {
    margin-left: 5%;
    font-size: 20px;
  }


  .right_container_body_choice_div5 {
    height: 20px;
    line-height: 20px;
    align-self: center;
  }

  .right_container_body_choice_div6 {
    height: 20px;
    line-height: 20px;
    align-self: center;
  }

  .right_container_body_choice_set {
    margin-left: 10%;
    font-size: 16px;
    text-decoration: underline;
  }

  .right_container_body_choice_delete {
    margin-left: 10%;
    font-size: 16px;
    color: red;
    text-decoration: underline;
  }

  .right_container_body_choice_div7 {
    margin-left: 1%;
    padding-bottom: 1%;
    margin-top: 2%;
    width: 100%;
    display: flex;
  }

  .right_container_body_choice_div8 {
    width: 25%;
    display: flex;
  }

  .right_container_body_multChoices{
    padding-top: 5%;
  }

  .right_container_body_judge{
    padding-top: 5%;
  }

  .right_container_body_pack{
    padding-top: 5%;
  }

  .right_container_body_bigQuestion{
    padding-top: 5%;
  }

  .fontHeight {
    height: 20px;
    line-height: 20px;
  }



  .right_container{
    width: 100%;
  }

  .right_foot{
    margin-left: 35%;
    margin-top: 5%;
  }

  .right_container_header{
    margin: 5% auto;
    width: 100%;
    text-align: center;
  }

  .right_container_header_div1{
    font-size: 20px;
  }

  .right_container_header_div2{
    margin-top: 1%;
  }

  .right_container_header_div3{
    margin-top: 1%;
  }

  .right_container_body_choice_div1{
    margin-left: 5%;
  }

  .right_container_body_choice_div2{
    margin-left: 6%;
  }

  .right_container_body_choice_div3{
    padding-top: 3%;
  }

  .right_container_body_choice_div4{
    display: flex;
  }

  .right_container_body_choice_div5{
    height: 20px;
    line-height: 20px;
    align-self: center;

  }

  .right_container_body_choice_div6{
    height: 20px;
    line-height: 20px;
    align-self: center;
  }

  .right_container_body_choice_set {
    margin-left: 0%;
    font-size: 16px;
    text-decoration: underline;
  }

  .right_container_body_choice_delete{

    margin-left: 3%;
    font-size: 16px;
    color: red;
    text-decoration: underline;
  }

  .right_container_body_choice_div7{
    margin-left: 1%;padding-bottom: 1%;margin-top: 2%;width: 100%;display: flex;
  }

  .right_container_body_choice_div8{
    width: 25%;display: flex;
  }

  .right_container_body_multChoices{
  }

  .right_container_body_judge{
  }

  .right_container_body_pack{
  }

  .right_container_body_bigQuestion{
  }

  .titleContent{
    word-break: break-word;
    display: -webkit-box;
    height: 20px;
    line-height: 20px;
  }

  .fontHeight{
    height: 20px;
    line-height: 20px;
  }



</style>
